<template>
  <div class="header">
    <div class="wrap padding-10">
      <nav class="nav relative">
        <div class="nav-logo flex flex-ac">
          <a href="/" class="logo-container" style="z-index: 10">
            <img src="/logo.png" alt="" class="logo" />
          </a>
        </div>
        <div class="menus flex flex-jc">
          <div class="menus-items relative flex flex-jc">
            <div class="menus-item flex col flex-ac">
              <a class="menu-item">社区</a>
            </div>
            <div class="menus-item flex col flex-ac">
              <a
                href="https://www.mydown.com/jhfl/yxhz/?f=bdf_12526"
                target="_blank"
                class="menu-item"
                >游戏列表</a
              >
            </div>
            <div class="menus-item flex col flex-ac">
              <a class="menu-item">关于我们</a>
            </div>
            <div class="menus-item flex col flex-ac">
              <a class="menu-item">联系我们</a>
            </div>
          </div>
        </div>
        <div class="nav-right flex flex-ac">
          <div v-show="uStore.userInfo" class="nav-right-item flex flex-ac">
            <ul class="list-inline relative splitters">
              <li
                class="user-profile relative"
                style="padding: 0 5px; vertical-align: middle"
              >
                <a href="javascript:void(0);" class="navbar-avatar">
                  <img class="avatar" :src="uStore.userInfo?.avatar" alt="" />
                </a>
                <ul class="sub-menu">
                  <div class="menu-wrap">
                    <div class="user-avatar">
                      <img
                        class="avatar"
                        :src="uStore.userInfo?.avatar"
                        alt=""
                      />
                    </div>
                    <a href="javascript:void(0);" class="nickname-item">{{
                      uStore.userInfo?.name
                    }}</a>
                    <div class="counts-item">
                      <a href="/user/center?tagid=1" class="count-item">
                        <div class="count-num">
                          {{ uStore.userDetailInfo?.followCount }}
                        </div>
                        <div class="count-text">关注</div>
                      </a>
                      <a href="/user/center?tagid=3" class="count-item">
                        <div class="count-num">
                          {{ uStore.userDetailInfo?.followersCount }}
                        </div>
                        <div class="count-text">粉丝</div>
                      </a>
                      <a href="/user/center?tagid=4" class="count-item">
                        <div class="count-num">
                          {{ uStore.userDetailInfo?.postCount }}
                        </div>
                        <div class="count-text">投稿</div>
                      </a>
                    </div>
                    <div class="links-item">
                      <a href="/user/center" class="link-item">
                        <div class="link-title">
                          <i class="xzfont icon-custom-user"></i>
                          <span>个人中心</span>
                        </div>
                        <i class="xzfont icon-arrow-right"></i>
                      </a>
                    </div>
                    <div class="links-item">
                      <a href="/message" class="link-item">
                        <div class="link-title">
                          <i class="xzfont icon-custom-user"></i>
                          <span>消息中心</span>
                          <span
                            style="
                              display: block;
                              margin-left: 1.5rem;
                              border-radius: 50%;
                              background-color: #fb7299;
                              color: var(--xz-white);
                              width: 20px;
                              height: 20px;
                              text-align: center;
                              line-height: 20px;
                            "
                            v-show="uStore.unreadMessageCount"
                            >{{ uStore.unreadMessageCount }}</span
                          >
                        </div>
                        <i class="xzfont icon-arrow-right"></i>
                      </a>
                    </div>
                    <div class="split-line"></div>
                    <div class="logout-item" @click="uStore.handleLogout">
                      <i class="xzfont icon-logout"></i>
                      <span>退出登录</span>
                    </div>
                  </div>
                </ul>
              </li>
            </ul>
          </div>
          <!-- <div class="nav-right-item">
            <a class="nav-btn" href="javascript:void(0);">搜索</a>
          </div> -->
          <div class="nav-right-item">
            <a
              class="nav-btn toggle-theme toggle-radius"
              href="javascript:void(0);"
              @click="handleChangeTheme"
            >
              <i class="xzfont icon-toggle-theme" aria-hidden="true"></i>
            </a>
          </div>
          <div v-show="!uStore.userInfo" class="nav-right-item flex flex-ac">
            <ul class="sign-list flex flex-ac splitters">
              <li class="sign-item">
                <a
                  @click="store.openSign()"
                  class="nav-btn"
                  href="javascript:void(0);"
                  >登录</a
                >
              </li>
              <li class="sign-item">
                <a
                  @click="store.openSign()"
                  class="nav-btn"
                  href="javascript:void(0);"
                  >注册</a
                >
              </li>
            </ul>
          </div>
          <div class="nav-right-item">
            <a class="nav-btn" href="/user/center?tagid=4">
              <div class="nav-upload">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 18 18"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  class="header-upload-entry__icon"
                >
                  <path
                    d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589"
                    stroke="currentColor"
                    stroke-width="1.7"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    d="M8.99413 11.2353L8.99413 3.82353"
                    stroke="currentColor"
                    stroke-width="1.7"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413"
                    stroke="currentColor"
                    stroke-width="1.7"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                </svg>
                <span>投稿</span>
              </div>
            </a>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script setup lang="ts">
import appStore from "@/store/app";
import userStore from "@/store/user";
import { onMounted } from "vue";

const uStore = userStore();
const store = appStore();

const handleChangeTheme = () => {
  const theme = document.documentElement.getAttribute("data-theme");
  if (theme === "light") {
    document.documentElement.setAttribute("data-theme", "dark");
    localStorage.setItem("theme", "dark");
  } else {
    document.documentElement.setAttribute("data-theme", "light");
    localStorage.setItem("theme", "light");
  }
};

onMounted(async () => {
  await uStore.handleGetUserDetailInfo();
});
</script>

<style scoped lang="scss">
.header {
  background-color: var(--xz-card-bg);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.nav {
  .nav-logo {
    flex-wrap: nowrap;
    height: 60px;
    z-index: 102;
    transition: 0.3s;

    .logo-container {
      padding: 0 2rem;

      .logo {
        height: 60px;
        width: 60px;
      }
    }
  }

  .menus {
    width: 100%;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;

    .menus-items {
      width: fit-content;
      inset: 0;

      .menus-item {
        padding: 0 1.5rem;
        margin: auto;
      }
    }
  }

  .nav-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 102;
    margin-right: 1.5rem;
    gap: 0.5rem;
    height: 100%;

    .nav-right-item {
      .sign-item {
        padding: 0 5px;

        &:hover {
          a {
            color: var(--xz-focus-color);
          }
        }
      }

      .toggle-theme {
        width: 29px;
        height: 29px;
        text-align: center;
        border-radius: 100%;
        position: relative;
        overflow: hidden;
        display: block;
        background: rgba(114, 114, 114, 0.5);

        &:hover {
          color: none;
        }
      }

      .icon-toggle-theme {
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          height: 1em;
          transition: 0.4s;
          content: "\e62c";
        }

        &::after {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          height: 1em;
          transition: 0.4s;
          content: "\e642";
          transform: translateX(2em);
        }
      }

      .sub-menu {
        position: absolute;
        right: 0;
        background: var(--xz-card-bg);
        opacity: 0;
        transform: translateY(6px);
        transition: 0.4s;
        visibility: hidden;
        min-width: 120px;
        width: 250px;
        padding: 10px 24px 18px;
        z-index: 99;
        border-radius: var(--xz-main-radius);
        box-shadow: 0 0 10px #0000001a;

        .menu-wrap {
          a:hover {
            color: unset;
          }

          .user-avatar {
            text-align: center;

            img.avatar {
              width: 80px;
              height: 80px;
              border-radius: 50%;
            }
          }
        }

        .nickname-item {
          font-weight: 500;
          display: block;
          text-align: center;
          font-size: 18px;
          margin-bottom: 10px;
        }

        .counts-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          padding: 0 20px;

          .count-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            transition: color 0.2s;

            .count-num {
              font-weight: 500;
              font-size: 18px;
              transition: color 0.2s;
            }

            .count-text {
              color: rgb(148, 153, 160);
              font-weight: 400;
              font-size: 12px;
              transition: color 0.2s;
            }

            &:hover {
              .count-num,
              .count-text {
                color: rgb(0, 174, 236);
              }
            }
          }
        }

        .links-item {
          .link-item {
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2px;
            padding: 0 14px;
            height: 38px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s;
            white-space: nowrap;

            &:hover {
              background-color: var(--xz-hover-color);
              color: var(--xz-white);
            }

            .link-title {
              display: flex;
              align-items: center;

              i.xzfont {
                margin-right: 16px;
              }
            }
          }
        }
      }

      .split-line {
        margin: 10px 0;
        width: 100%;
        height: 1px;
        background: gray;
      }

      .logout-item {
        font-weight: 500;
        display: flex;
        align-items: center;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s;

        &:hover {
          background-color: var(--xz-hover-color);
          color: var(--xz-white);
        }

        i.xzfont {
          margin-right: 16px;
        }
      }

      .user-profile:hover {
        .sub-menu {
          opacity: 1;
          transform: translateY(-10px);
          visibility: unset;
        }
      }

      .nav-upload {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        width: 90px;
        height: 34px;
        border-radius: 8px;
        background: #fb7299;
        color: #fff;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        cursor: pointer;
        transition: background-color 0.3s;

        svg {
          margin-right: 5px;
          color: #fff;
        }
      }
    }
  }
}

[data-theme="dark"] .icon-toggle-theme:before {
  transform: translateX(-2em) !important;
}

[data-theme="dark"] .icon-toggle-theme:after {
  transform: unset !important;
}
</style>
